<!--index.html主线程-->
<html>
	<head>
		<style>
			.box {
				width: 200px;
				height: 200px;
				margin-top: 100px;
				background: #f09;
				animation: bounce 2s linear 0s infinite alternate;
				background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);
			}

			@keyframes bounce {
				0% {
					border-radius: 40% 60% 72% 28% / 70% 77% 23% 30%;
				}

				100% {
					border-radius: 75% 25% 24% 76% / 13% 15% 85% 87%;
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<p>
			Web Worker 有以下几个使用注意点
			1.同源限制
			分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
			2.DOM 限制
			Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。
			3.通信联系
			Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。
			4.脚本限制
			Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
			5.文件限制
			Worker 线程无法读取本地文件，即不能打开本机的文件系统（file:），它所加载的脚本，必须来自网络。
			
			总结
			由于javaScript的最初设计特点，采用了单线程的运行机制。
			浏览器是多个线程相互协作来工作的，但是GUI渲染线程与JS引擎线程互斥。
			js线程在运行时，会锁死GUI渲染线程，为了利用多核CPU的计算能力，HTML5提出Web Worker标准。
			Web Worker的使用有一些限制，比如说：同源限制，DOM限制，文件限制等，但能解决在js需要大量计算工作时，页面卡顿的问题。
			Web Worker实际上是js线程的一个子线程，理论上js还是单线程的。
		</p>
	</body>
	<script>
		window.onload = function() {
			// 创建一个子线程worker实例
			var worker = new Worker('./index2.js');
			setTimeout(function() {
				// 通信：向子线程发送消息
				worker.postMessage('start')
			}, 2000)
			worker.addEventListener('message', function(res) {
				//  通信：收到子线程消息
				console.log('result:', JSON.stringify(res.data));
				// 关闭worker线程
				worker.terminate();
			})
			document.getElementsByClassName("box")[0].addEventListener('click', function() {
				console.log('click')
			})
		}
	</script>
</html>